<template>
  <view :class="theme">
    <view class="bg-14" style="height: 150rpx;" />
    <view class="bg-2 br-20 fd-row ai-center"
      style="margin: -100rpx 30rpx 0; padding: 24rpx 28rpx; box-shadow: 0 7rpx 40rpx 0 rgba(217,216,216,0.3);">
      <u-image radius="50%" width="100" height="100" :src="userInfo.avatar || `/static/logo.png`" />
      <view class="ml-24 oh">
        <text class="color-3 fs-30 fw-700 ellipsis">{{ userInfo.vip_name || "-" }}</text>
        <text class="mt-16 color-14">
          {{ userInfo.vip ? `${userInfo.exprise_time}到期` : `您还不是会员,开通会员尊享会员权益` }}
        </text>
      </view>
    </view>
    <!-- <scroll-view scroll-x style="width: auto; margin: 60rpx 20rpx 0;"> -->
    <view class="fd-row flex-wrap" style="margin: 60rpx 20rpx 0;">
      <view @click="currentOptionIndex = index" v-for="(option, index) in 
        options" :key="index" class="br-24 oh ai-center" :style="{
          ...(currentOptionIndex === index ? { borderColor: `#ff861b`, backgroundColor: `#fff2df` } : { borderColor: `#fff`, backgroundColor: `#fff` }),
          borderWidth: `2rpx`, borderStyle: `solid`, margin: `0 10rpx 30rpx`, padding: `40rpx 10rpx`, flexShrink: 0, width: `calc((100% - 60rpx) / 3)`
        }">
        <u-image width="74" height="74" :src="option.icon" />
        <label class="mt-36 color-19 ai-baseline">
          <text class="fs-36 fw-700">{{ option.price?.split(".")[0] || 0 }}</text>
          <text>.{{ option.price?.split(".")[1] || "00" }}{{ +option.channel === 1 ? "元" : "星核" }}</text>
        </label>
        <text class="mt-14 color-22">{{ option.total_days }}天</text>
        <label class="mt-16 color-3">{{ option.name }}</label>
      </view>
    </view>
    <!-- </scroll-view> -->
    <button v-if="options.length" @click="submit" hover-class="tap-hover"
      class="bg-15 color-20 lh-3 fs-32 br-48 border-none fw-700" style="margin: 60rpx 30rpx 0;" plain>
      {{ userInfo.vip ? "立即升级" : "立即开通" }}
    </button>
    <view v-if="options[currentOptionIndex]" class="color-20 " style="margin: 90rpx 30rpx;">
      <view class="ai-center">
        <u-image width="436" height="32" src="/static/img/vip/title.png" />
      </view>
      <view class="mt-60 lh-2">
        <text>{{ options[currentOptionIndex].coupons_num }}</text>
      </view>
    </view>
    <u-popup v-model="showPopup.password" @input="changePopup($event, 'password')" mode="center" closeable
      :mask-close-able="false" close-icon-color="#333">
      <view class="bg-2 oh br-20" style="width: 90vw;">
        <view class="mt-30 ai-center">
          <text class="mt-16 mb-30 color-6 fs-32 fw-700">请输入支付密码</text>
          <u-message-input @change="inputPayPassword" @finish="submit" focus width="80" :maxlength="6" space="5"
            dot-fill />
        </view>
        <view @click="uniNavigator({ url: `/pages/client/main/setPayPassword` })" hover-class="tap-hover"
          class="mt-10 mb-30 p-20 as-center ml-12 color-15" style="text-decoration: underline;">
          忘记支付密码？
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { debounce, getClient, isAbsoluteURL, uniNavigator } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
const { $config = {} } = getApp().globalData || {};

const { theme } = useMapState(["theme"]);
const options = ref<any[]>([]);
const currentOptionIndex = ref(0);
const userInfo = ref<AnyObject>({});

const showPopup = reactive({
  password: false
});
const payPassword = ref("");

const inputPayPassword = (val: string) => {
  payPassword.value = val;
}

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey] = e;
}

onLoad(() => {
  getUserInfo();
  uni.showToast({ icon: "loading" });
  uni.request({
    url: "/vipConfig",
    success({ data }: any) {
      uni.hideToast();
      options.value = data.vip_config;
    }
  });
});

const getUserInfo = () => {
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      userInfo.value = data;
    }
  });
}

const submit = debounce(() => {
  if (showPopup.password) {
    uni.showToast({ icon: "loading", mask: true });
    const option = options.value[currentOptionIndex.value];
    showPopup.password = false;
    uni.request({
      url: "/paymentInfo",
      data: { channel: option.channel, order_type: 3, vip_type: option.type, pay_pass: payPassword.value },
      success({ data, msg: title }: any) {
        if (data.url) {
          if (isAbsoluteURL(data.url)) {
            uniNavigator({ url: data.url });
            return;
          }
          if (![5, 6].includes(getClient())) {
            uni.showToast({ title: "请前往APP开通", icon: "none" });
            return;
          }
          uni.requestPayment({
            provider: "alipay",
            orderInfo: data.url,
            success() {
              uni.showToast({ title: "支付成功", duration: 1200, mask: true });
              getUserInfo();
            }
          });
          return;
        }

        uni.showToast({ title });
        getUserInfo();
      }
    });
    return;
  }
  showPopup.password = true;
});

</script>

<style lang="scss" scoped>
// scss
</style>